<template>
    <div id="aa">
    <div class="heaa">
      <ul>
        <li>
          <van-icon name="arrow-left" size="20" @click="back" />
        </li>
        <li>讲师详情</li>
        <li></li>
      </ul>
    </div>

    <div class="hemp">
        <ul>
            <li>{{list.teacher_name}}</li>
            <img :src="list.teacher_avatar" alt="">
            <!-- <img :src="list.avatar" alt=""> -->
           
        </ul>
    </div>

    <van-tabs v-model="activeName">
  <van-tab title="讲师介绍"    name="a" >
    
    <li>

    <!-- <p>{{list.teacher_name}}</p> -->

     <!-- {{list.classify_title}} -->
      <p>  教学年龄 {{list1.course_classify_id}}年</p>
    <p> 授课价格 {{list1.browse_num}} 学习币</p>
  <p>
    老师简介
     <span v-html="list1.course_details"> </span>
  </p>
  
      </li></van-tab>
      <!-- pinglun.png -->
  <van-tab title="主讲课程" name="b">{{list1.title}}</van-tab>
  <van-tab title="学员评价" name="c"><img src="@/assets/img/pinglun.png" alt=""></van-tab>
</van-tabs>
  </div>
</template>
<script>
// import { list } from "./../../../reques/api";
// import { list } from "./../../../assets/img/pinglun.png"
import { list } from "@/request/http";
import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'
export default {
    name:"member",
     data() {
    return {
      list: [],
       list1: []
    };
  },
  methods: {
    ...mapMutations(['course1','course2']),
       back(){
            this.$router.go(-1);
            this.course2()
        },
    save() {
        
      list({ id: this.$route.query.id }).then(res => {
        // this.list = res.data.info;
        console.log(res);
         this.list=res.data.teachers[0]
           this.list1=res.data.info
      });
    }
  },
  mounted() {
    this.save();
    
  }
};
</script>

<style lang="scss" scoped>
#aa {
  width: 100%;
}
.heaa {
background: linear-gradient(180deg,#63b7fe,#4e7de3);

  height: 110px;
  ul {
    // background: rebeccapurple;
    height: 40px;
    display: flex;
    justify-content: space-between;
    font-family: PingFangSC-Medium;

    font-weight: 500;
    color: white;
    li {
      line-height: 40px;
      font-size: 20px;
    }
  }
}
.hemp{
    width: 95%;
    background: white;
    height: 100px;
    margin: 0 auto;
    position: relative;
    top: -60px;
    border-radius: 5px;
    img{
      width: 50px;
    }
}
</style>








<template>
    <div class="course-rxf">
        <div class="course-rxf1">
            <ul>
                <li class="course-li">11</li>
                <li class="course-li1">特色课</li>
                <li>
                    <van-icon name="search" class="course-van" />
                </li>
            </ul>
        </div>
        <!-- <van-tabs v-model="active" :line-width="16">
            <van-tab title="待上课"></van-tab>
            <van-tab title="已上课"></van-tab>
            <van-tab title="已取消"></van-tab>
        </van-tabs> -->
        <!-- <div class="course-rxf2">
            <ul>
                <li>分裂</li>
                <li>排序</li>
                <li>筛选</li>
            </ul>
        </div> -->
        <van-dropdown-menu :active-color="$theme_color">

            <van-dropdown-item title="分类" ref="kinds">
            <div class="parent-box">
                <div class="tm-kind" v-for="(item,index) in attrclassify" :key="item.id">
                    <p>{{item.name}}</p>
                    <div class="tmk-item">
                        <span
                        
                        v-for="it in item.child"
                        :key="it.id"
                        @click="selectId(it.id,'attr'+index)"
                        >{{it.name}}</span>
                    </div>
                </div>
                <div class="seach-btn">
                    <van-button @click="reset">重置</van-button>
                    <van-button @click="searchFor('kinds')">确定</van-button>
                </div>
            </div>
            </van-dropdown-item>

            <van-dropdown-item title="排序" ref="sort">
                <ul class="course-sort">
                    <li
                    :class="order_by == item.value ? 'active':''"
                    v-for="item in option"
                    :key="item.value"
                    @click="selectType('sort',item.value)"
                    >{{item.text}}</li>
                </ul>
            </van-dropdown-item>
            <van-dropdown-item title="筛选" ref="filter">
            <div class="filter-box">
                <div class="tm-kind">
                <div class="tmk-item">
                    <span
                    :class="course_type == item.type ? 'active':''"
                    v-for="item in course_types"
                    :key="item.type"
                    @click="selectType('filter',item.type)"
                    >{{item.value}}</span>
                </div>
                </div>
            </div>
            </van-dropdown-item>
        </van-dropdown-menu>
        
        <div class="course-rxf3" @scroll.passive="getScroll($event)">
            <ul v-for="(item,key) in list" :key="key" class="course-rxful" @click="edd(item)">
                <li>
                    <p>{{item.title}}</p>
                    <p>共{{item.browse_base}}课时</p>
                    <p
                        v-for="(item,key) in item.teachers_list"
                        style="display: flex;width: 100%;height: 40px"
                        :key="key"
                    >
                        <img class="img1" :src="item.teacher_avatar" alt />
                        <span>{{item.teacher_name}}</span>
                    </p>
                    <hr style="color: #f2f2f2" />

                    <p class="course-rxfp">
                        <span class="a2">共有{{item.total_periods}}人报名</span>
                        <span class="a2" style="float: right;color: green">免费</span>
                    </p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { Tab, Tabs } from 'vant';
import { DropdownMenu, DropdownItem } from 'vant';
import { Button } from 'vant';
import { course } from "@/request/http";
import { getClassify } from "@/request/http";
import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'
export default {
    name: "course",
    components: {
        [Tab.name]: Tab,
        [Tabs.name]: Tabs,
        [DropdownMenu.name]: DropdownMenu,
        [DropdownItem.name]: DropdownItem,
        [Button.name]: Button,
    },
    data() {
        return {
            // list: [],
            list: [],
            loading: false,
            finished: false,
            page:0,
            attrclassify:[],
            option: [
                { text: "综合排序", value: 0 },
                { text: "最新", value: 1 },
                { text: "最热", value: 2 },
                { text: "价格从低到高", value: 3 },
                { text: "价格从高到低", value: 4 }
            ],
            course_types: [
                { type: 0, value: "全部" },
                { type: 2, value: "大班课" },
                { type: 3, value: "小班课" },
                { type: 4, value: "公开课" },
                { type: 5, value: "点播课" },
                { type: 7, value: "面授课" },
                { type: 8, value: "音频课" },
                { type: 9, value: "系统课" },
                { type: 10, value: "图文课" },
                { type: 11, value: "会员课" }
            ],
        };
    },
    methods: {
        onLoad() {
            var str=[]
            course(this.page).then(res => {
                str = res.data.data.list
                this.list=this.list.concat(str);
                // console.log(this.list);
            });
        },
        getScroll(event) {
            // 滚动条距离底部的距离scrollBottom
            let scrollBottom =
                event.target.scrollHeight -
                event.target.scrollTop -
                event.target.clientHeight;
            if (scrollBottom < 5) {               //页码++
                this.page+=1
                this.onLoad();
            }
        },
        ...mapMutations(['course1','course2']),
        edd(item) {
            this.$router.push({
                path: "/coursedata",
                query: { id: item.id }
            });
            this.course1()
        },
        getClassify() {
            getClassify().then(res => {
                res= res.data.data
                this.attrclassify=res.attrclassify;
                console.log(this.attrclassify[0].name);
            });
        },
    },
    mounted() {
        this.onLoad();
        this.getClassify();
    }
};
</script>

<style lang="scss" scoped>
*{
    padding: 0;
    margin:0;
}
.course-rxf {
    width: 100%;
    background: #E5E5E5;
    .course-rxf1 {
        width: 100%;
        margin: 0 auto;
        ul {
            height: 50px;
            background: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .course-li {
                color: white;
                font-size: 30px;
            }
            .course-li1 {
                // color: white;
                font-size: 20px;
            }
            li {
                .course-van {
                    font-size: 30px;
                }
            }
        }
    }
}

.course-fitler {
    height: 84px;
}
.parent-box {
    padding-bottom: 20px;
    .seach-btn {
        padding: 10px 0px;
        display: flex;
        justify-content: space-between;
        button {
            width: 340px;
            height: 40px;
            background: rgba(255, 255, 255, 1);
            border-radius: 5px;
            border: 2px solid rgba(217, 217, 217, 1);
            font-size: 15px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(89, 89, 89, 1);
            margin-right: 10px;
            margin-left: 10px;
            &:last-child {
                color: #fff;
                background: yellow;
                border: 0;
            }
        }
    }
}

.tm-kind {
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f1f1;
    p {
      padding: 10px 10px;
      font-size: 13px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(89, 89, 89, 1);
    }
    .tmk-item {
        span {
            margin: 5px 10px;
            display: inline-block;
            width: 74px;
            height: 35px;
            background: rgba(245, 245, 245, 1);
            border-radius: 6px;
            font-size: 15px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: #646464;
            text-align: center;
            line-height: 35px;
            overflow: hidden;
            &:nth-child(4n + 0) {
            margin-right: 0;
            }
        }
        span.active {
            color:red;
            background: #ebeefe;
        }
    }
}
.course-sort {
    background: #fff;
    li {
      height: 40px;
      text-align: center;
      line-height: 40px;
      font-size: 15px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(89, 89, 89, 1);
      border-bottom: 1px solid #f5f5f5;
      &:last-child {
        border: 0;
      }
    }
    li.active {
      color: yellow;
    }
  }
.course-rxf3 {
    height: 78vh;overflow: scroll;
    ul {
        width: 95%;
        background: white;
        margin: 0 auto;
        border-radius: 5px;
        margin-top:10px; 
        .course-rxfp{
        padding-right:20px; 
        }
        li {
        padding-left:20px; 
            img {
                width: 50px;
            }
            p {
                padding: 20px 0;
            }
        }
    }
}
</style>



<template>
    <div>
        <div class="div1">
            <ul>
                <li>
                    <img src="../../assets/images/return.png" alt />
                </li>
                <li>
                    <input placeholder="请输入内容"/>
                </li>
                <li>
                    <!-- <span @click="goBack" v-if="input==''">取消</span> -->
                    <span style="color: #000">搜索</span>
                </li>
            </ul>
        </div>
        <div>
            <section class="history-search">
                <header class="his-header">
                        <p>
                        <span>历史搜索</span>
                        <span>
                            <i @click="empty_his"></i>
                        </span>
                        </p>
                </header>
                <div class="list">
                    <!-- <span v-for="(item,index) in input_history" :key="index" @click="input=item;">{{item}}</span> -->
                </div>
            </section>
        </div>



        <div class="search-info">
        <!-- <header class="search-header">
            <span @click="goBack">
                <img src="../../assets/images/return.png" alt />
            </span>
            <span>
                <input
                class="input"
                v-model="input"
                placeholder="请输入内容"
                @focus="emptybool=false;searchbool=false"
                />
            </span>
            <span @click="goBack" v-if="input==''">取消</span>
            <span @click="gotosearch" v-if="input!=''" style="color: #000">搜索</span>
            
        </header> -->
        <!-- <span @click="gotosearch" style="color: #000">搜索</span> -->
            <!-- 历史搜索 -->
        <!-- <section class="history-search" v-if="input==''">
            <header class="his-header">
                    <p>
                    <span>历史搜索</span>
                    <span>
                        <i @click="empty_his"></i>
                    </span>
                    </p>
            </header>
            <div class="list">
                <span v-for="(item,index) in input_history" :key="index" @click="input=item;">{{item}}</span>
            </div>
        </section> -->

            <!-- 列表 -->
        <!-- <van-list v-model="loading" :finished="finished" @load="onLoad">
            <course-item v-if="classList.length" :course="classList"></course-item>
        </van-list> -->
        </div>
    </div>
</template>
<script>
export default {
    name:"Search",
     data() {
        return {
            list: [],
            list1: []
        };
    },
    methods: {
        
    },
    mounted() {
        
    }
};
</script>

<style lang="scss" scoped>
// .search-header{
//     display: flex;
//     height: 90px;
//     border-bottom: 1px solid rgba(234, 234, 234, 1);
//     background: #ffffff;
// }
.div1{
    padding:10px 0;
    width:100%;
    height:30px;
    border-bottom: 1px solid rgba(234, 234, 234, 1);
}
.div1 ul{
    display: flex;
}
.div1 ul li{
    width:10%;
    text-align: center;
    padding:8px 0 0 0;
}
.div1 ul li:nth-child(2){
    padding:0;
    flex:1;
}
.div1 ul li img{
    width:30%;
}
.div1 ul li input{
    height: 30px;
    padding-left: 20px;
    border: none;
    background: #e4e7ed;
    border-radius: 20px;
    font-size: 15px;
    width: 90%;
}
.his-header {
    height: 80px;
    p {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        // span {
        //     &:nth-child(1) {
        //     font-size: 30px;
        //     color: #333;
        //     font-weight: bold;
        //     }
        //     &:nth-child(2) {
        //         i {
        //             display: inline-block;
        //             background: url("@/assets/images/delete-history.png")
        //             no-repeat;
        //             background-size: 100% 100%;
        //             width: 28px;
        //             height: 28px;
        //         }
        //     }
        // }
    }
}
// .div1 img{
//     width:100%
// }
// .search-info {
//   padding-bottom: 80px;
//   .search-header {
//     // @extend %flex-center;
//     display: flex;
//     height: 15px;
//     border-bottom: 1px solid rgba(234, 234, 234, 1);
//     background: #fff;
//     span {
//       &:nth-child(1) {
//         flex: 1;
//         // @extend %flex-center;
//         img {
//           width: 18px;
//           height: 32px;
//           padding-left: 30px;
//         }
//       }
//       &:nth-child(2) {
//         flex: 6;
//         input {
//           height: 60px;
//           padding-left: 56px;
//           border: none;
//           background: #e4e7ed;
//           border-radius: 30px;
//           font-size: 30px;
//           width: 86%;
//         }
//       }
//       &:nth-child(3) {
//         flex: 1;
//         font-size: 28px;
//         color: #d2d2d1;
//       }
//     }
//   }
//   .history-search {
//     margin: 30px 34px;
//     .his-header {
//       height: 80px;
//       p {
//         display: flex;
//         justify-content: space-between;
//         align-items: center;
//         height: 100%;
//         span {
//           &:nth-child(1) {
//             font-size: 30px;
//             color: #333;
//             font-weight: bold;
//           }
//           &:nth-child(2) {
//             i {
//               display: inline-block;
//               background: url("../../assets/images/delete-history.png")
//                 no-repeat;
//               background-size: 100% 100%;
//               width: 28px;
//               height: 28px;
//             }
//           }
//         }
//       }
//     }
//     .list {
//       display: flex;
//       flex-wrap: wrap;
//       justify-content: left;
//       span {
//         margin: 20px 14px 0 14px;
//         padding: 12px 20px;
//         border-radius: 20px;
//         background: rgba(247, 247, 247, 1);
//         font-size: 24px;
//         color: #333;
//       }
//     }
//   }
//   .search-status {
//     margin: 20px;
//     li {
//       height: 102px;
//       padding-left: 18px;
//       line-height: 102px;
//       font-size: 30px;
//       color: #333;
//       text-align: left;
//       &:not(:last-child) {
//         border-bottom: 0.5px solid rgba(234, 234, 234, 1);
//       }
//     }
//   }
//   .index-item-page {
//     background: #f8f8f8;
//   }
// }
</style>


<template>
  <div class="search-info">
    <header class="search-header">
      <span @click="goBack">
        <img src="@/assets/images/return.png" alt />
      </span>
      <span>
        <input
          class="input"
          v-model="input"
          placeholder="请输入内容"
          @focus="emptybool=false;searchbool=false"
        />
      </span>
      <span @click="goBack" v-if="input==''">取消</span>
      <span @click="gotosearch" v-if="input!=''" style="color: #000">搜索</span>
      <!-- <span @click="gotosearch" style="color: #000">搜索</span> -->
    </header>
    <!-- 历史搜索 -->
    <section class="history-search" v-if="input==''">
      <header class="his-header">
        <p>
          <span>历史搜索</span>
          <span>
            <i @click="empty_his"></i>
          </span>
        </p>
      </header>
      <div class="list">
        <span v-for="(item,index) in hisList" :key="index" @click="input=item;">{{item}}</span>
      </div>
    </section>

    <!-- 列表 -->
    <van-list v-model="loading" :finished="finished" @load="onLoad">
        <div class="classify">
            <ul>
                <li v-for="(item,key) in classList" :key="key" @click="Info(item.id)">
                <div>
                    <p class="tit">{{item.title}}</p>
                    <p>{{item.start_play_date | formatDate}} ~ {{item.end_play_date | formatDate}}共{{item.sales_num}}课时</p>
                    <p class="p1" v-for="(i,k) in item.teachers_list" v-show="k<3">
                    <img :src="i.teacher_avatar" alt />
                    <span>{{i.teacher_name}}</span>
                    </p>
                </div>
                <p>
                    <span>共有{{item.total_periods}}人报名</span>
                    <span class="spa">免费</span>
                </p>
                </li>
            </ul>
         </div>
    </van-list>
  </div>
</template>

<script>
import { List } from 'vant';
// import { search } from "../request/api.js";
import { search } from "@/request/http";
export default {
  components:{
        [List.name]: List,
    },
  data() {
    return {
      input: "",
      input_history:JSON.parse(localStorage.getItem('list'))||[],
      searchbool: false,
      emptybool: false,
      classList: [],
      empty_type: {
        name: "暂无搜索结果"
      },
      page: 1,
      name: this.$route.query.name,
      loading: false,
      finished: true,
      hisList:[]
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    empty_his() {
      this.input_history = [];
      localStorage.removeItem('list');
    },
    gosearch() {
        if (this.name) {
        this.$router.replace({
          name: this.name
        });
        return;
      }
      if (this.finished) {
        this.page = 0;
        this.finished = false;
      } else {
        this.page = 1;
        this.getCourse();
      }
    },
    getCourse() {
         search({limit: 10,
          page: this.page,
          course_type: 0,
          keywords: this.input}).then(res => {
          this.loading = false;
          console.log(res)
          if (res.data.list.length == 0) {
            this.finished = true;
            if (this.page == 1) {
              this.emptybool = true;
            }
            return;
          }
          if (this.page == 1) {
            this.classList = res.data.list;
            console.log(this.classList)
          } else {
            this.classList = this.classList.concat(res.data.list);
            console.log(this.classList)
          }
        //   this.emptybool = false;
        //   this.searchbool = true;
        });
    },
    gotosearch() {
      this.input_history.unshift(this.input)
      for(var i=0;i<this.input_history.length;i++){
        if(!this.hisList.includes(this.input_history[i])){
          this.hisList.push(this.input_history[i])
        }
      }
      localStorage.setItem('list', JSON.stringify(this.hisList));
      this.gosearch()
      
    },
    inp() {
      
    },
    inp_his() {
      
    },
    onLoad() {
      this.page++;
      this.getCourse();
    }
  },
  created() {
    // this.inp();
    this.inp_his();
    // if (this.input != "") {
    //   this.gotosearch();
    // }
  },
  watch: {
    input(val) {
      if (!val) {
        this.classList = [];
      }
    }
  },
  filters: {
    formatDate: function(value) {
      let date = new Date(value*1000);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let a=""
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return MM + "月" + d + "日" + h + ":" + m ;
    }
  },
};
</script>

<style scoped lang="scss">
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.search-info {
  padding-bottom: 80px;
  .search-header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    border-bottom: 1px solid rgba(234, 234, 234, 1);
    background: #fff;
    span {
      &:nth-child(1) {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        align-items: center;
        img {
          width: 18px;
          height: 32px;
          padding-left: 30px;
        }
      }
      &:nth-child(2) {
        flex: 6;
        input {
          height: 30px;
          padding-left: 56px;
          border: none;
          background: #e4e7ed;
          border-radius: 30px;
          font-size: 15px;
          width: 86%;
          outline: none;
        }
      }
      &:nth-child(3) {
        flex: 1;
        font-size: 15px;
        color: #d2d2d1;
      }
    }
  }
  .history-search {
    margin-left: 30px ;
    .his-header {
      height: 60px;
      p {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        span {
          &:nth-child(1) {
            font-size: 20px;
            color: #333;
            font-weight: bold;
          }
          &:nth-child(2) {
            i {
              display: inline-block;
            //   background: url("@/assets/images/delete-history.png")
                // no-repeat;
              background-size: 100% 100%;
              width: 20px;
              height: 20px;
            }
          }
        }
      }
    }
    .list {
      display: flex;
      flex-wrap: wrap;
      justify-content: left;
      span {
        padding: 12px 20px;
        margin-left:10px;
        border-radius: 20px;
        background: rgba(247, 247, 247, 1);
        font-size: 15px;
        color: #333;
      }
    }
  }
  .search-status {
    margin: 20px;
    li {
      height: 102px;
      padding-left: 18px;
      line-height: 102px;
      font-size: 30px;
      color: #333;
      text-align: left;
      &:not(:last-child) {
        border-bottom: 0.5px solid rgba(234, 234, 234, 1);
      }
    }
  }
  .index-item-page {
    background: #f8f8f8;
  }
}
.classify {
  width: 100%;
  margin-bottom: 50px;
  h5 {
    font-size: 18px;
    margin-top: 20px;
    margin-left: 10px;
  }
  ul {
    list-style: none;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 96%;
      height: 150px;
      background: white;
      display: block;
      margin: 0 auto;
      margin-top: 15px;
      border-radius: 5px;
      text-align: left;
      div {
        width: 100%;
        height: 70%;
        border-bottom: 1px solid rgb(165, 163, 163);
        line-height: 30px;
        margin-left: 5px;
        .tit {
          font-size: 13px;
        }
        .p1 {
          display: inline;
        }
        p > img {
          width: 15px;
          height: 15px;
          border-radius: 50px;
          margin-left:15px;
        }
      }
      p {
        font-size: 13px;
        .spa {
          color: green;
          float: right;
          margin-top: 5px;
        }
      }
    }
  }
}
</style>